<template>
  <div class="cartoon-form-container">
    <div class="layout">
      <el-card class="basic-info">
        <template #header>基本信息</template>
        <el-tabs v-model="activeName" class="profile-card">
          <el-tab-pane label="基本资料" name="info">
              <ul>
                <li>用户密钥</li>
                <li>到期时间</li>
              </ul>
            <!-- 添加测试按钮 -->
            <div class="test-buttons">
              <el-button @click="testDbUserConfigSelect">测试 dbUserConfigSelect</el-button>
              <el-button @click="testDbUserConfigDelete">测试 dbUserConfigDelete</el-button>
              <el-button @click="testDbUserConfigUpdate">测试 dbUserConfigUpdate</el-button>
              <el-button @click="testDbUserConfigInsert">测试 dbUserConfigInsert</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="投递设置" name="delivery-setup">
            <ul>
              <li>
                <el-checkbox v-model="enableGreeting">是否启用打招呼语句</el-checkbox>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {ElMessage} from "element-plus";
const activeName = ref('info')
const enableGreeting = ref(false)
const queryForm = ref({
  id: 1,
  is_greet: true,
  user_key: 'exampleKey'
});

const testDbUserConfigSelect = async () => {
  const data = {
    id: queryForm.value.id,
    is_greet: queryForm.value.is_greet,
    user_key: queryForm.value.user_key,
    order: 'id',
    asc: true
  };
  console.log('查看传递信息参数', data);
  try {
    const result = await window.bossHandleApi.dbUserConfigSelect('db-user-config-select', data);
    console.log('dbUserConfigSelect result:', result);
    ElMessage.success('dbUserConfigSelect 成功');
  } catch (error) {
    console.error('Error in dbUserConfigSelect:', error);
    ElMessage.error('dbUserConfigSelect 失败');
  }
};

const testDbUserConfigDelete = async () => {
  const data = {
    id: queryForm.value.id
  };
  console.log('查看传递信息参数', data);
  try {
    const result = await window.bossHandleApi.dbUserConfigDelete('db-user-config-delete', data);
    console.log('dbUserConfigDelete result:', result);
    ElMessage.success('dbUserConfigDelete 成功');
  } catch (error) {
    console.error('Error in dbUserConfigDelete:', error);
    ElMessage.error('dbUserConfigDelete 失败');
  }
};

const testDbUserConfigUpdate = async () => {
  const data = {
    values: { is_greet: queryForm.value.is_greet, user_key: queryForm.value.user_key },
    condition: { id: queryForm.value.id }
  };
  console.log('查看传递信息参数', data);
  try {
    const result = await window.bossHandleApi.dbUserConfigUpdate('db-user-config-update', data);
    console.log('dbUserConfigUpdate result:', result);
    ElMessage.success('dbUserConfigUpdate 成功');
  } catch (error) {
    console.error('Error in dbUserConfigUpdate:', error);
    ElMessage.error('dbUserConfigUpdate 失败');
  }
};

const testDbUserConfigInsert = async () => {
  const data = {
    is_greet: queryForm.value.is_greet.toString(),
    user_key: queryForm.value.user_key
  };
  console.log('查看传递信息参数', data);
  try {
    const result = await window.bossHandleApi.dbUserConfigInsert('db-user-config-insert', data);
    console.log('dbUserConfigInsert result:', result);
    ElMessage.success('dbUserConfigInsert 成功');
  } catch (error) {
    console.error('Error in dbUserConfigInsert:', error);
    ElMessage.error('dbUserConfigInsert 失败');
  }
};

</script>

<style scoped lang="scss">
.profile-card {
  .avatar {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }
  ul {
    list-style: none;
    padding: 0;
    li {
      padding: 12px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      &:last-child {
        border-bottom: none;
        padding-top: 12px;
      }
      span {
        margin-left: auto;
      }
    }
  }
}

.layout {
  width: 600px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-card, .basic-info {
  width: 100%;
}

.cartoon-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  padding: 40px;
  box-sizing: border-box;
}
</style>
